<template>
  <div class="nav">
    <div class="nav-container">
       <div class="logo">
         <a class="mt-1 inline-block" href="www.aliyun.com">
           <img src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png">
         </a>
       </div>
      <div class="container-left">
        <a href="https://www.aliyun.com/activity">
          <span style="vertical-align: middle;">最新活动</span>
        </a>
        <a href="javascript:void(0);">
          <span style="vertical-align: middle;">产品</span>
          <i class="ace-custom-icon down_arrow">
          </i>
          <div class="card-chan-pin"></div>
        </a>
      </div>

      <div class="container-right">
         <router-link to="ok">登录</router-link>
          |
         <router-link to="ok">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {watch,ref} from 'vue'
import {useRoute,useRouter} from 'vue-router'

export default {
  name: "NavComponent",
  props:{
    isLogin: Boolean
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const hashLogin = ref(false);

    watch(() => route.params, async newParams => {
        hashLogin.value = await newParams.isOk
    })

    return {
      hashLogin
    }
  }
}
</script>

<style scoped>
  .nav{
    height: 64px;
    width: 100%;
    background: whitesmoke;
    z-index: 999;
    position: relative;
    top: 0;
    display: inline-block;
    line-height: 18px;
    font-size: 14px;
    color: rgb(55,61,65);
    box-sizing: border-box;
  }
  .nav-container{
    width: 98%;
    height: 64px;
    float: left;
  }
  .logo{
    margin-left: 24px;
    margin-right: 24px;
    line-height: 64px;
    height: 64px;
    float:left;
  }
  img{
    width: 106px;
    height: 24px;
    margin-top: 17.5px;
    vertical-align: baseline;
  }
  .container-left{
    line-height: 64px;
    height: 64px;
    float: left;
  }
  a{
    background-color: transparent;
    padding: 0 16px;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    transition: color .3s ease 0s;
  }
  a:hover{
    color:  #ff6a00;
  }

  .ace-custom-icon{
    display: inline-block;
    transition: all .2s ease 0s;
    font-family: "aliyun-icon" !important;
    font-style: normal;
    margin-left: 10px;
    height: 14px;
  }
  .down_arrow{
    width: 5px;
    height: 5px;
    border-top: 1px solid #000; /* 箭头颜色 */
    border-right: 1px solid #000; /* 箭头颜色 */
    transform: rotate(135deg);
    transition: all 0.2s ease 0s;/*all是所有属性都将获得动画效果  0.5秒完成动画 ease(逐渐变慢)*/
  }

  a:hover .down_arrow{
    transform: rotate(315deg);/*旋转180度 */
    border-top: 1px solid #ff6a00; /* 箭头颜色 */
    border-right: 1px solid #ff6a00; /* 箭头颜色 */
  }

  .card-chan-pin{
    height: 0px;
  }

  a:hover .card-chan-pin{
    height: 300px;
    width: 100%;
    position: absolute;
    top: 64px;
    left: 0px;
    background-color: aqua;
    transition: height 0.3s ease 0s;/*all是所有属性都将获得动画效果  0.5秒完成动画 ease(逐渐变慢)*/
  }

  .container-right{
    line-height: 64px;
    height: 64px;
    float: right;
    margin-right: 24px;
  }

</style>
